var Widgets = {
	INTERNAL : {}
};

Widgets.create = function(obj) {

	var widget = function(id) {
		this.elem = $('#' + id);
		if (this.init)
			this.init();
	}

	for ( var func in obj) {
		widget.prototype[func] = obj[func];
	}

	widget.extend = Widgets.INTERNAL.extend;
	return widget;
}

Widgets.INTERNAL.extend = function(obj) {

	var oldWidget = this;

	var extendedWidget = function(id) {
		this.superWidget = oldWidget.prototype;
		this.elem = $('#' + id);
		this.superWidget.elem = this.elem;
		if (this.init)
			this.init();
	}

	for ( var func in oldWidget.prototype) {
		extendedWidget.prototype[func] = oldWidget.prototype[func];
	}

	for ( var func in obj) {
		extendedWidget.prototype[func] = obj[func];
	}

	extendedWidget.extend = Widgets.INTERNAL.extend;

	return extendedWidget;
}

Widgets.Label = Widgets.create({
	text : function(newText) {
		if (newText) {
			this.elem.text(newText);
		} else {
			return this.elem.text();
		}
	}

});

Widgets.Button = Widgets.Label.extend({

	text : function(newText) {
		return this.superWidget.text(newText);
	},
	onClick : function(func) {
		this.elem.on('click', func);
	}

});

Widgets.Form = Widgets.create({
	fields : {},
	init : function() {
		var self = this;
		this.elem.find(':input').each(function() {
			var field = $(this);
			self.fields[field.attr('name')] = field;
		});
	},

	model : function(newModel) {
		if (newModel) {
			for ( var name in newModel) {
				this.fields[name].val(newModel[name]);
			}
		} else {
			var ret = {};
			for ( var name in this.fields) {
				ret[name] = this.fields[name].val();
			}
			return ret;
		}
	},
	get : function(prop) {
		return this.fields[prop].val();
	},
	set : function(prop, val) {
		this.fields[prop].val(val);
	},
	reset : function(prop, val) {
		$(':input', this.elem).each(function() {
			var type = this.type;
			var tag = this.tagName.toLowerCase(); // normalize case

			if (type == 'text' || type == 'password' || tag == 'textarea')
				this.value = "";

			else if (type == 'checkbox' || type == 'radio')
				this.checked = false;

			else if (tag == 'select')
				this.selectedIndex = -1;
		});
	},
	onSubmit : function(func) {
		this.elem.on('submit', function(event) {
			event.preventDefault();
			func();
		});
	}

});

Widgets.Detail = Widgets.create({
	fields : {},
	init : function() {
		var self = this;
		this.elem.find('span').each(function() {
			var label = $(this);
			var id = label.attr('id');
			if (id != null) {
				self.fields[id] = label;
			}
		});
	},

	model : function(newModel) {
		if (newNodel) {
			for ( var field in newModel) {
				this.fields[field].text(newModel[field]);
			}

		} else {
			var ret = {};
			for ( var field in this.fields) {
				ret[field] = this.fields[field].text();
			}
			return ret;
		}

	},
	get : function(prop) {
		return this.fields[prop].text();
	},
	set : function(prop, val) {
		this.fields[prop].text(val);
	}

});

Widgets.Panel = Widgets.create({
	show : function(name) {
		if (typeof selector === "string") {
			$('#' + name).css('display', '');

		} else {
			name.elem.css('display', '');
		}

	},
	hide : function(name) {
		if (typeof selector === "string") {
			$('#' + name).css('display', 'none');

		} else {
			name.elem.css('display', 'none');
		}
	}

});

Widgets.Table = Widgets.create({
	init: function(){
		this.tbody = this.elem.find('tbody');	
	}

});
